<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{{ "Imágenes"|trans }}</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

{% javascripts '@ImagesBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}

{% stylesheets '@ImagesBundle/Resources/public/css/*' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}

<style type="text/css">
#queue {
	border: 1px solid #E5E5E5;
	height: 177px;
	overflow: auto;
	margin-bottom: 10px;
	padding: 0 3px 3px;
}
</style>
</head>

<body>

<div class="accordion" id="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">{{ "Subir archivos"|trans }}</a>
    </div>
    <div id="collapseOne" class="collapse in">
      <div class="accordion-inner">
	    <form>
		  <div id="queue"></div>
		  <div class="btn btn-mini"><input id="file_upload" name="file_upload" type="file" multiple="true"></div>
		  <a class="btn btn-small btn-inverse" href="javascript:$('#file_upload').uploadifive('upload')">{{ "Subir al servidor"|trans }}</a>
	    </form>
      </div>
    </div>
  </div>

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">{{ "Editar archivos"|trans }}</a>
    </div>
    <div id="collapseTwo" class="collapse">
      <div class="accordion-inner">
        <div class="pagination">
          <ul>
            <li><a href="#">Prev</a></li>
            <li class="active">
              <a href="#">1</a>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">Next</a></li>
          </ul>
        </div>
        <div id="PhotoPrevs" >

            {% for images in resultat %}
                
                <div id="UploadImages">
                       Imagen 
                </div>

            {% endfor %}    
            <!-- The cropped images will be populated here -->
        </div>
        <div class="pagination">
          <ul>
            <li><a href="#">Prev</a></li>
            <li class="active">
              <a href="#">1</a>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">Next</a></li>
          </ul>
        </div>        
      </div>
    </div>
  </div>
        <script type="text/javascript">
                $(function() {

                        $('#UploadImages').uberuploadcropper({
                                //---------------------------------------------------
                                // uploadify options..
                                //---------------------------------------------------
                                'debug'		: true,
                                'action'	: '{{ asset("bundles/images/uploadify.php") }}',
                                'params'	: {},
                                'allowedExtensions': ['jpg','jpeg','png','gif'],
                                //'sizeLimit'	: 0,
                                //'multiple'	: true,
                                //---------------------------------------------------
                                //now the cropper options..
                                //---------------------------------------------------
                                //'aspectRatio': 1, 
                                'allowSelect': false,			//can reselect
                                'allowResize' : true,			//can resize selection
                                'setSelect': [ 0, 0, 200, 200 ],	//these are the dimensions of the crop box x1,y1,x2,y2
                                //'minSize': [ 200, 200 ],			//if you want to be able to resize, use these
                                //'maxSize': [ 500, 500 ],
                                //---------------------------------------------------
                                //now the uber options..
                                //---------------------------------------------------
                                'folder': 'uploads/',			// only used in uber, not passed to server
                                'cropAction': '{{ asset("bundles/images/crop.php") }}'		// server side request to crop image
                                
                                
                        });

                });
        </script>
	<script type="text/javascript">
		$(function() {
			$('#file_upload').uploadifive({
				'auto'         : false,
				'formData'     : {'test' : 'something'},
				'queueID'      : 'queue',
				'height'          : 25,  
				'buttonText': '{{ "Seleccionar"|trans }}',
				'uploadScript' : '{{ asset("bundles/images/uploadifive/uploadifive.php") }}',
                                'onUploadComplete' : function(file, data) {
					console.log(data);
                                        var txt=file.size+"@"+file.name
                                        var txt2=1
                                        var $PhotoPrevs = $('#PhotoPrevs');
                                        var Carpeta = '{{ asset("bundles/images/uploadifive/uploads/") }}'; 

                                        $PhotoPrevs.append('<img src="'+ Carpeta + txt +'" />');
                                        //alert ("Ruta imagen-->"+txt);
                                        $.ajax({
                                            url: "{{ path('ImagesBundle_list_ajax') }}",
                                            type: "POST",
                                            data: { 
                                                "sizeImagen" : file.size,
                                                "rutaImagen" : txt,
                                                "nombreHotel" : txt2,
                                                "dadesArray" : data 
                                            },
                                            success: function(data) {
                                                    
                                                // Quan tot va be, 
                                                document.location.reload(true);
                                                

                                            }
                                        });
				}
			});
		});
	</script>
</body>
</html>